<template>
  <div class="homepage">
    
    <div style="margin:30px 50px;">
      <el-button @click="openPage('AutoMaker')" type="primary" >去录制<i class="el-icon-s-promotion
 el-icon--right"></i></el-button>
        <p style="color:#ccc;">进去后2s自动滚动，双击可以停在滚动</p>
    </div>

    
    <h3>选择文章</h3>
    <div>
      <el-input-number v-model="pageIndex" :min="-300" label="指定文章编号"></el-input-number>
    </div>

    <h3>选择模板</h3>
    <div class="temp-box">
      <div class="temp-item" @click="switchActive(0)" :class="{'active':selectActive == 0}">
        默认
      </div>
      <div class="temp-item"@click="switchActive(index+1)" :class="{'active':selectActive == index+1}" v-for="(url,index) in getImgList()" :key="index">
        <el-image
        style="width: 100%; height: 100%"
        :src="url"
        fit="scale-down"
        ></el-image>
      </div>
    </div>
    
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',

  data() {
    return {
      selectActive:0,
      pageIndex:0
    }
  },
  mounted(){
    const history = localStorage.getItem('book-history');
    if(history){
      const {pageIndex,tempIndex} = JSON.parse(history);
      this.selectActive = tempIndex;
      this.pageIndex = pageIndex;
    }
  },
  methods: {
    openPage(name) {
      this.$router.push({
        name: name,
        query:{
          tempIndex:this.selectActive,
          pageIndex:this.pageIndex
        }
      })
      localStorage.setItem('book-history',JSON.stringify({
        tempIndex:this.selectActive,
        pageIndex:this.pageIndex
      }));
    },
    switchActive(idx){
      this.selectActive = idx;
    },
    getImgList() {
      let arr = []
      for (let i = 1; i <= 10; i++) {
        let url = require(`@/assets/image/${i}.jpg`)
        arr.push(url)
      }
      return arr
    }
  }
}
</script>
<style scoped lang="less">
.homepage {
  padding:20px;
  .temp-box{
    overflow: hidden;
    .temp-item{
      float:left;
      width: 100px; 
      height: 100px;
      border:5px solid #ccc;
      margin:5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .temp-item.active{
      border-color: red;
    }
  }
  
  
}
</style>
